<template>
	<view class="" @tap="change_num">
		<view class="numberBox x-f tc" >
		    <view class="reduce" @tap="reduce">-</view>
		    <view class="value">
		        <input v-model="value" disabled="disabled"/>
		    </view>
		    <view class="add" @tap="add">+</view>
		</view>
	</view>
    
</template>

<script>
	import {
		mapState
	} from 'vuex';
    export default {
        data() {
            return {
                value: 1,
            }
        },
		computed: {
			...mapState({
				goods: state => state.goods.goodsInfo,
				type: state => state.order.type,
			})
		},
        methods:{
			change_num() {
				this.$emit('change_num',this.value)
			},
            // 减少
            reduce() {
                // 商品输了只能小于等于1，
                if (this.value >= 2) {
                    this.value--
                }
                if (this.value == 1) {
                    this.value = 1;
                }
            },
            // 增加
            add() {
			  if(this.goods.is_group && this.type == 'group') {
				  if(this.group_max_number != null) {
					  if(this.value < this.goods.group_max_member) {
					  	this.value++;
					  } else {
					  	this.$tools.toast('该团购最大购买数已上限')
					  }
				  } else {
					  this.value++;
				  }
			  } else {
				  this.value++;
			  }
            },
			
        }
    }
</script>

<style lang="scss" scoped>
    .numberBox {
        display: flex;
        width: 223rpx;
        border: 1px solid #a3a3a3;
        border-radius: 10rpx;
        margin-left: 20rpx;
        height: 60rpx;
        line-height: 50rpx;
        .reduce {
            width: 68rpx;
            border-right: 1px solid #a3a3a3;
            height: 50rpx;
        }
        .value {
            flex: 1;
        }
        .add {
            width: 68rpx;
            border-left: 1px solid #a3a3a3;
        }
    }
</style>
